@import 'nib'
@import 'variables'

.graph-viz
  float: left
  width: 500px

  path.link
    fill: none
    stroke: #7F8C8D
    stroke-width: 2px

  text
    font-family: sans-serif
    pointer-events: none

marker
  fill: #D8DADC

text
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
  .faded
    fill: #333

.node
  .ring
    fill: none
    opacity: 0
    stroke: #6AC6FF
  &.selected
    .ring
      stroke: #FDCC59
  &.selected:hover
    .ring
      stroke: #6AC6FF
  &:hover, &.selected
    .ring
      opacity: .3

.relationship
  .overlay
    opacity: 0
    fill: #6AC6FF
   &.selected
    .overlay
      fill: #FDCC59
  &.selected:hover
    .overlay
      fill: #6AC6FF
  &:hover, &.selected
    .overlay
      opacity: .3

.outline, .ring, .context-menu-item
  cursor: pointer

.zoom-holder
  position absolute
  bottom: 38px
  right: 0
  padding: 6px 6px 0 6px
  border-left: #e6e9ef solid 1px
  border-top: #e6e9ef solid 1px
  background: #fff
  button
    display: list-item
    list-style-type: none
    font-size: 2em
    margin-bottom: 10px
    border: none
    color: #9b9da2
    background: transparent
    border-color: black
    &:hover
      color:black
    &.faded
      opacity: .3
      cursor: auto
      &:hover
        color: #9b9da2

.remove_node .expand_node
  cursor: pointer
  &:hover
    border: 2px black solid

.context-menu-item
  &:hover
    fill: #b9b9b9
    font-size: 14px
path.context-menu-item
  stroke-width: 2px
  fill: #d2d5da

text.context-menu-item
  fill: #fff
  text-anchor: middle
  pointer-events: none
  font-size: 14px
